{{extend '../layout/main.html'}}

{{block name="css"}}
<style>
  .avatar-content {
    position: relative;
  }

  .avatar-content button {
    position: absolute;
    z-index: 1;
  }

  .avatar-content input {
    position: absolute;
    opacity: 0;
    z-index: 2;
  }
</style>
{{/block}}

{{block name="content"}}
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid">

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">

            <div class="edit-avatar">
              <img src="{{data.avatar}}" alt="..." id="upload_avatar" class="img-avatar">
              <div class="avatar-divider"></div>
              <div class="edit-avatar-content avatar-content">
                <button class="btn btn-default">上传头像</button>
                <input type="file" class="btn btn-default" id="file" name="file" />
              </div>
            </div>
            <hr>
            <form method="post" action="/profile" class="site-form" id="editprofile">
              <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" class="form-control" name="username" value="{{data.username}}" readonly />
              </div>
              <div class="form-group">
                <label for="nickname">昵称</label>
                <input type="text" class="form-control" name="nickname" id="nickname" placeholder="输入您的昵称"
                  value="{{data.nickname}}">
              </div>
              <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="text" class="form-control" name="phone" placeholder="手机号码" value="{{data.phone}}">
              </div>
              <div class="form-group">
                <label for="age">年龄</label>
                <input type="number" class="form-control" name="age" id="age" aria-describedby="emailHelp"
                  placeholder="年龄" value="{{data.age}}">
              </div>
              <div class="form-group">
                <label for="remark">简介</label>
                <textarea class="form-control" name="intro" id="intro" rows="3">{{data.intro}}</textarea>
              </div>
              <input type="hidden" name="avatar" id="avatar" value="{{data.avatar}}">
              <button type="submit" class="btn btn-primary">保存个人信息</button>
            </form>

          </div>
        </div>
      </div>

    </div>

  </div>

</main>
<!--End 页面主要内容-->
{{/block}}

{{block name="js"}}
<script src="/js/jquery.validate.js"></script>
<script src="/js/messages_zh.js"></script>

<script>

  // 文件上传
  const fileDom = document.querySelector('#file')
  fileDom.addEventListener('change', function () {
    let file = this.files[0]
    // formData对象数据
    let formData = new FormData()
    formData.append('file', file)

    // fetch
    /* fetch('/upfile', {
      method: 'post',
      body: formData
    }).then(ret => ret.json()).then(data => {
      document.querySelector('#upload_avatar').src = data.url
      document.querySelector('#avatar').value = data.url
    }) */

    // xhr
    /* const xhr = new XMLHttpRequest()
    xhr.open('post', '/upfile', true)
    xhr.onload = function () {
      let data = JSON.parse(xhr.responseText)
      document.querySelector('#upload_avatar').src = data.url
      document.querySelector('#avatar').value = data.url
    }
    xhr.send(formData) */

    // jquery
    $.ajax({
      method: 'post',
      url: '/upfile',
      data: formData,
      processData: false,
      contentType: false
    }).then(data => {
      document.querySelector('#upload_avatar').src = data.url
      document.querySelector('#avatar').value = data.url
    })
  })

  // 邮政编码验证   
  jQuery.validator.addMethod("isPhone", function (value, element) {
    var tel = /^1[3-9]\d{9}$/;
    return this.optional(element) || (tel.test(value));
  }, "您的手机号码不合法");

  // $().ready(function () {
  //   // https://www.runoob.com/jquery/jquery-plugin-validate.html?sadsa=dssd&sdd=%27%E6%89%93%E6%89%93%27
  //   $("#editprofile").validate({
  //     // 验证规则
  //     rules: {
  //       // key就是表单项中的name中的名称，要一致
  //       phone: {
  //         // 手机号码不能为空
  //         required: true,
  //         isPhone: true
  //       },
  //       age: {
  //         min: 1,
  //         max: 200
  //       }
  //     },
  //     // 验证不通过时的提示
  //     messages: {
  //       phone: {
  //         required: "手机号码不能为空"
  //       }
  //     },
  //     // 验证不通过时回调处理
  //     /* errorPlacement: function (error, element) {
  //       error.appendTo(element.parent());
  //     }, */
  //     /* showErrors: function (errorMap, errorList) {
  //       this.defaultShowErrors();
  //     }, */
  //     // 验证通过时，处理的方法
  //     // form当前的表单dom
  //     submitHandler: function (form) {
  //       form.submit()
  //     }
  //   })
  // })
</script>
{{/block}}